<template>
  <div class="safety-approve-nfo" :class="{ 'is-details': isSignature }">
    <div class="info-list">
      <template v-if="isSignature">
        <div class="contentList">
          <div class="contentLeft">
            <span class="contentLeftFont">作业证编号：</span>
          </div>
          <div class="contentRight border">
            {{ safeExamineDetail.code }}
          </div>
        </div>
        <div class="contentList">
          <div class="contentLeft">
            <span class="contentLeftFont">申请单位：</span>
          </div>
          <div class="contentRight border">
            {{ form.applyDepartmentName }}
          </div>
        </div>
        <div class="contentList">
          <div class="contentLeft">
            <span class="contentLeftFont">申请人：</span>
          </div>
          <div class="contentRight border">
            {{ form.applyPerson }}
          </div>
        </div>
      </template>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">起吊重物质量（t）：</span>
        </div>
        <div class="contentRight border">
          <input
            type="text"
            :disabled="isSignature"
            v-model="form.liftingWeight"
            placeholder="请输入起吊重物质量（t）"
          />
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">作业级别：</span>
        </div>
        <div class="contentRight border">
          <iu-selector
            class="selector"
            :placeholder="form.taskLevel"
            popupTitle="作业级别"
            :initSelect="form.taskLevel"
            @selected="form.taskLevel = $event"
            :options="levelOption"
          ></iu-selector>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">吊装地点：</span>
        </div>
        <div class="contentRight border">
          <input
            type="text"
            :disabled="isSignature"
            v-model="form.taskPlace"
            placeholder="请输入吊装地点"
          />
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">吊装工具名称：</span>
        </div>
        <div class="contentRight border">
          <input
            type="text"
            :disabled="isSignature"
            v-model="form.taskToolName"
            placeholder="请输入吊装工具名称"
          />
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">监护人：</span>
        </div>
        <div class="contentRight border">
          <div
            class="select-user"
            @click="eventPersonSelect('leader', 'guardian')"
          >
            <span v-if="form.guardian">{{ form.guardian }}</span>
            <span v-else style="color: rgb(111, 111, 119);">请选择</span>
          </div>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">作业开始时间</span>
        </div>
        <div class="contentRight border" @click="selectTime('startTime')">
          <span v-if="form.startTime">
            {{ form.startTime | formatDate("YYYY-MM-DD HH:mm") }}
          </span>
          <span v-else style="color:rgb(111, 111, 119);">
            选择作业开始时间
          </span>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">作业开始时间</span>
        </div>
        <div class="contentRight border" @click="selectTime('endTime')">
          <span v-if="form.endTime">
            {{ form.endTime | formatDate("YYYY-MM-DD HH:mm") }}
          </span>
          <span v-else style="color:rgb(111, 111, 119);">
            选择作业结束时间
          </span>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
    </div>
    <div
      class="info-list"
      v-for="(item, index) in form.person"
      :key="'person' + index"
    >
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">吊装人员：</span>
        </div>
        <div class="contentRight border">
          <div
            class="select-user"
            @click="eventPersonSelect('user', 'person', index, 'person')"
          >
            <span v-if="item.person">{{ item.person }}</span>
            <span v-else style="color: rgb(111, 111, 119);">请选择</span>
          </div>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">特种作业证件号：</span>
        </div>
        <div class="contentRight border">
          <input
            type="text"
            :disabled="isSignature"
            v-model="item.workCode"
            placeholder="请输入特种作业证件号"
          />
        </div>
      </div>
    </div>
    <div class="info-list">
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">吊装指挥：</span>
        </div>
        <div class="contentRight border">
          <div
            class="select-user"
            @click="eventPersonSelect('user', 'hoistingCommand')"
          >
            <span v-if="form.hoistingCommand">{{ form.hoistingCommand }}</span>
            <span v-else style="color: rgb(111, 111, 119);">请选择</span>
          </div>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">特种作业证件号：</span>
        </div>
        <div class="contentRight border">
          <input
            type="text"
            :disabled="isSignature"
            v-model="form.hoistingCommandCode"
            placeholder="请输入特种作业证件号"
          />
        </div>
      </div>
    </div>
    <div class="info-list">
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">吊装内容：</span>
        </div>
        <div class="contentRight border">
          <input
            type="text"
            :disabled="isSignature"
            v-model="form.hoistingContent"
            placeholder="请输入吊装内容"
          />
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">危害辨识：</span>
        </div>
        <div class="contentRight border">
          <iu-selector
            class="selector"
            :disabled="isSignature"
            :placeholder="form.hazardIdentification.join(' , ')"
            popupTitle="危害辨识"
            multiple
            :initSelect="form.hazardIdentification"
            @selected="form.hazardIdentification = $event"
            :options="hazardOption"
          ></iu-selector>
        </div>
      </div>
    </div>
    <div class="info-list">
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">安全措施</span>
        </div>
      </div>
      <div class="contentList full">
        <div class="contentRight" v-if="!isSignature">
          <div data-list="checkboxList" class="checkbox-list">
            1.
            吊装质量大于等于40t的重物和土建工程主体结构；吊装物体虽不足40t，但形状复杂、刚度小、长径比大、精密贵重，作业条件特殊，已编制吊装作业方案，且经作业主管部门和安全管理部门审查，报主管（副总经理/总工程师批准）
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            2. 指派专人监护，并监守岗位，非作业人员禁止入内。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            3. 作业人员已按规定佩戴防护器具和个体防护用品。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            4. 已与分厂（车间）负责人取得联系，建立联系信号
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            5. 已在吊装现场设置安全警戒标志，无关人员不许进入作业现场。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            6. 夜间作业采用足够的照明。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            7. 室外作业遇到（大雪/暴雨/大雾/六级以上大风），已停止作业。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            8.
            检查起重吊装设备、钢丝绳、缆风绳、链条、吊钩等各种机具，保证安全可靠。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            9. 明确分工、坚守岗位，并按规定的联络信号，统一指挥。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            10. 将建筑物、构筑物作为锚点，需经工程处审查核算并批准。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            11. 吊装绳索、缆风绳、拖拉绳等避免同带电线路接触，并保持安全距离。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            12.
            人员随同吊装重物或吊装机械升降，应采取可靠的安全措施，并经过现场指挥人员批准。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            13. 利用管道、管架、电杆、机电设备等作吊装锚点，不准吊装。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            14. 悬吊重物下方站人、通行和工作，不准吊装。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            15. 超负荷或重物质量不明，不准吊装。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            16. 斜拉重物、重物埋在地下或重物坚固不牢，绳打结、绳不齐，不准吊装。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            17. 棱角重物没有衬垫措施，不准吊装。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            18. 安全装置失灵，不准吊装。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            19.
            用定型起重吊装机械（履带吊车/轮胎吊车/矫式吊车等）进行吊装作业，遵守该定型机械的操作规程。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            20. 作业过程中应先用低高度、短行程试吊。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            21. 作业现场出现危险品泄漏，立即停止作业，撤离人员。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            22. 作业完成后现场杂物已清理。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            23. 吊装作业人员持有法定的有效的证件。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            24.
            地下通讯电（光）缆、局域网络电（光）缆、排水沟的盖板，承重吊装机械的负重量已确认，保护措施已落实。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            <div>
              25. 起吊物的质量（
              <span class="contenteditable" contenteditable> </span>
              ）t，经确认，在吊装机械的承重范围。
            </div>
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            26. 在吊装高度的管线、电缆桥架已做好防护措施。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            27. 作业现场围栏、警戒线、警告牌、夜间警示灯已按要求设置。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            28. 作业高度和转臂范围内，无架空线路。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            29. 人员出入口和撤离安全措施已落实：A.指示牌；B.指示灯。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            30. 在爆炸危险生产区域内作业，机动车排气管已装火星熄灭器。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            31.
            现场夜间有充足照明：36V、24V、12V防水型灯；36V、24V、12V防爆型灯。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            32. 作业人员已佩戴防护器具。
          </div>
          <div data-list="checkboxList" class="checkbox-list">
            <div>
              33. 其他安全措施：<input
                type="text"
                :disabled="isSignature"
                v-model="form.safetyMeasuresOther"
                class="input-text"
                style="width: 100%;text-align: left;"
              />
            </div>
          </div>
          <div class="checkbox-list">
            <div class="contentLeft">
              <span class="contentLeftFont">编制人：</span>
            </div>
            <div class="contentRight border">
              <div
                class="select-user"
                @click="
                  eventPersonSelect(
                    'leader',
                    'safetyMeasuresPerson',
                    5,
                    'person'
                  )
                "
              >
                <span v-if="form.safetyMeasuresPerson[5]">{{
                  form.safetyMeasuresPerson[5].person
                }}</span>
                <span v-else style="color: rgb(111, 111, 119);">请选择</span>
              </div>
              <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
            </div>
          </div>
          <div class="checkbox-list">
            <div class="contentLeft">
              <span class="contentLeftFont">确认人：</span>
            </div>
            <div class="contentRight border">
              <div
                class="select-user"
                @click="
                  eventPersonSelect(
                    'leader',
                    'safetyMeasuresPerson',
                    4,
                    'person'
                  )
                "
              >
                <span v-if="form.safetyMeasuresPerson[4]">{{
                  form.safetyMeasuresPerson[4].person
                }}</span>
                <span v-else style="color: rgb(111, 111, 119);">请选择</span>
              </div>
              <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
            </div>
          </div>
        </div>
        <div class="contentRight" v-else>
          <div
            class="checkbox-list"
            v-for="(item, index) in form.safetyMeasuresContent || []"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <div class="info-list">
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">安全教育人：</span>
        </div>
        <div class="contentRight border">
          <div
            class="select-user"
            @click="eventPersonSelect('leader', 'safetyPerson')"
          >
            <span v-if="form.safetyPerson">{{ form.safetyPerson }}</span>
            <span v-else style="color: rgb(111, 111, 119);">请选择</span>
          </div>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
    </div>
    <template v-if="1">
      <div class="info-list">
        <div
          class="contentList full"
          v-for="(item, index) in acceptancePersonData"
          :key="'acceptance' + index"
        >
          <div class="contentLeft">
            <span class="contentLeftFont">{{ item.name }}</span>
          </div>
          <div class="contentRight border">
            <div
              class="select-user"
              @click="
                eventPersonSelect('leader', 'acceptancePerson', index, 'person')
              "
            >
              <span
                v-if="
                  form.acceptancePerson[index] &&
                    form.acceptancePerson[index].person
                "
              >
                {{ form.acceptancePerson[index].person }}
              </span>
              <span v-else style="color: rgb(111, 111, 119);">请选择</span>
            </div>
            <div class="select-user-right">
              <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
              <!-- <label>签字顺序：</label>
              <input
                v-model.number="form.acceptancePerson[index].sequence"
                maxlength="1"
                class="esign-sort"
                type="text"
              /> -->
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div
        class="info-list"
        v-for="(item, index) in acceptancePerson"
        :key="'acceptance' + index"
      >
        <div class="contentList full">
          <div class="contentLeft">
            <span class="contentLeftFont">
              {{
                acceptancePersonData[index] && acceptancePersonData[index].name
              }}
            </span>
          </div>
          <div class="contentRight">
            <div>
              {{ item.userName }}
            </div>
          </div>
        </div>
        <!-- <template v-if="item.checkState != null">
          <div class="contentList full">
            <div class="contentLeft">
              <span class="contentLeftFont">
                审批时间：
              </span>
            </div>
            <div class="contentRight">
              <div>
                {{ item.signatureTime | formatDate }}
              </div>
            </div>
          </div>
          <div class="contentList full">
            <div class="contentLeft">
              <span class="contentLeftFont">
                审批结果：
              </span>
            </div>
            <div class="contentRight">
              <div>
                {{ item.checkState ? "通过" : "不通过" }}
              </div>
            </div>
          </div>
          <div class="contentList full">
            <div class="contentLeft">
              <span class="contentLeftFont">
                审批描述：
              </span>
            </div>
            <div class="contentRight">
              <div>
                {{ item.content }}
              </div>
            </div>
          </div>
        </template> -->
      </div>
    </template>
    <div class="processWrap">
      <template v-if="!isSignature && (isEdit || !safeExamineDetail.id)">
        <div>
          <button @click="back">取消</button>
        </div>
        <div>
          <button @click="eventConfirm(1)">保存草稿</button>
        </div>
        <div>
          <button @click="eventConfirm(4)">提交</button>
        </div>
      </template>
      <template v-if="isSignature && isEsign">
        <div>
          <button @click="eventReject">驳回</button>
        </div>
        <div>
          <button @click="eventEsignConfirm">审批通过</button>
        </div>
      </template>
    </div>
    <div class="esign-fullscreen" v-if="esignShow">
      <div class="info-list">
        <div class="contentList full">
          <div class="contentLeft">
            <span class="notNull" v-if="confirmRejectTag">*</span>
            <span class="contentLeftFont">描述</span>
          </div>
          <div class="contentRight">
            <textarea
              name="userQuestion"
              v-model="esignContent"
              placeholder="请输入描述"
              class="userQuestion"
              maxlength="200"
            ></textarea>
          </div>
        </div>
      </div>
      <div class="info-list" v-if="!confirmRejectTag">
        <div class="contentList full">
          <div class="contentLeft">
            <span class="notNull">*</span>
            <span class="contentLeftFont">签字</span>
          </div>
          <div class="contentRight">
            <vue-esign ref="esign" :width="800" :height="600" bgColor="#fff" />
          </div>
        </div>
      </div>
      <div class="processWrap" v-if="buttonShow">
        <template>
          <div>
            <button @click="handleShowCancel">取消</button>
          </div>
          <div>
            <button @click="handleShowConfirm">保存</button>
          </div>
        </template>
      </div>
    </div>
    <confirm
      class="deviceDetailManage"
      v-model="confirmShow"
      title="提示"
      :close-on-confirm="false"
      @on-cancel="confirmShow = false"
      @on-confirm="handleTipsConfirm"
    >
      <p style="text-align:center;">
        确认要{{ confirmRejectTag ? "驳回" : "通过" }}该审批吗？
      </p>
    </confirm>

    <selectUser
      :show.sync="selectUserShow"
      type="select"
      :user-type="selectUserType"
      :initDepartmentId="form.applyDepartmentId || ''"
      @selected="handlePersonSelected"
    ></selectUser>
  </div>
</template>
<script>
import AssignmentsDataMixin from "./mixin";
export default {
  name: "donghuo",
  mixins: [AssignmentsDataMixin],
  data() {
    return {
      acceptancePersonData: [
        { name: "生产单位安全部门验收人：" },
        { name: "生产单位验收人：" },
        { name: "作业单位安全部门验收人：" },
        { name: "作业单位验收人：" },
        { name: "审批部门验收人：" }
      ]
    };
  }
};
</script>
